<template>
    <div class="sider" v-if="datas">

        <!-- 侧边栏头部 -->
        <div class="sider-title">
            <img src="@/assets/images/huiyanlogo.png" class="logo">
        </div>

        <!-- 菜单 -->
        <a-menu
            v-model:openKeys="openKeys"
            v-model:selectedKeys="selectedKeys"
            mode="inline"
            theme="dark"
            :inline-collapsed="collapsed"
            
        >
            <template v-for="item in datas" :key="item.key">

                <!-- 不存在子菜单 -->
                <a-menu-item 
                    v-if="item.children && item.children.length === 0" 
                    :key="item.key" 
                    @click="siderClick(item)"
                >
                    <template #icon>
                        <PieChartOutlined />
                    </template>
                    <span>{{item.title}}</span>
                </a-menu-item>

                <!-- 存在子菜单 -->
                <a-sub-menu 
                    v-if="item.children && item.children.length > 0" 
                    :key="item.key"
                >
                    <template #icon>
                        <MailOutlined />
                    </template>
                    <template #title>{{item.title}}</template>
                    <a-menu-item
                        v-for="row in item.children"
                        :key="row.key"
                        @click="siderClick(item)"
                    >
                       {{row.title}} 
                    </a-menu-item>
                </a-sub-menu>

            </template>
        </a-menu>

    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from "vue"
import { useRouter } from 'vue-router'
import { Modal } from 'ant-design-vue';
import {
    PieChartOutlined,
    MailOutlined,
    DesktopOutlined,
    InboxOutlined,
    AppstoreOutlined,
} from "@ant-design/icons-vue"

export default defineComponent({
    components: {
        PieChartOutlined,
        MailOutlined,
        DesktopOutlined,
        InboxOutlined,
        AppstoreOutlined,
    },
    props: ['state'],
    setup (props, context) {
        //router是全局路由对象，route= userRoute()是当前路由对象
        let router = useRouter()
        let siderDatas = reactive(JSON.parse(window.sessionStorage.getItem("siderDatas")))

        const state = reactive ({
            collapsed: props.state,
            selectedKeys: ["1"],
            openKeys: ["sub1"],
            preOpenKeys: ["sub1"],
        })

        watch (
            () => state.openKeys,
            (val, oldVal) => {
                state.preOpenKeys = oldVal;
            }
        )

        const toggleCollapsed = () => {
            state.collapsed = !state.collapsed;
            state.openKeys = state.collapsed ? [] : state.preOpenKeys;
        }

        const siderClick = (item) => {
            let routers = router.options.routes[0].children
            let routerArr = routers.filter( row => row.name === item.router)
            if (routerArr.length > 0) {
                router.push({
                    name: item.router,
                    params:{
                        item: item
                    }
                })        
            }else{
                Modal.warning({
                    title: '警告',
                    content: '该页面未完成',
                });
            }
        }

        console.log(siderDatas)
        
        return {
            ...toRefs(state),
            toggleCollapsed,
            siderClick,
            datas: siderDatas.dt
        }
    },
});
</script>

<style>
.sider-title{
    width: 100%;
    height: 48px;
    background-color: #001529;
    text-align: center;
    /* display: inline-block;
    background-image:url(@/assets/images/huiyanlogo.png);
    background-repeat: no-repeat;
    background-size: 100% 100%; */
}
.sider-title .logo{
    width: 100px;
    height: 48px;
}
</style>